<template>
  <section>
    <el-tree :data="processList"
             :props="props"
             node-key="id"
             default-expand-all
             :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node,data }">
        <span v-if="data.category===1">{{ data.resourcename }}</span>
        <a v-else-if="data.category===2" href="#" @click="gotoModules(data.path)">{{data.resourcename}}</a>
      </span>
    </el-tree>
  </section>
</template>

<script>
  import API from '@/api'
    export default {
        name: "index",
      data(){
          return{
            processList:[],
            props:{
              label: "resourcename",
              children: "list",
            }
          }
      },
      methods:{
        getList(){
          API.resource.nav().then(res=>{
            console.log(res.data);
            this.processList = res.data.menuList;
          }).catch(error=>{
            console.error(error);
          });
        },
        gotoModules(url){
          this.$router.push({path:url,query:{origin:this.$route.path}});
        }
      },
      mounted(){
        this.getList();
      }
    }
</script>

<style scoped>

</style>
